<template>
	<w-layout showNavbar navTitle="团队" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view class="public-box-11 px-50 py-50" style="min-height: 640rpx;position: relative;">
					<image style="width: 200rpx;height: 200rpx;position: absolute;top: -8%;right: 2%;z-index: 99;" src="/static/image/box-11-1.png" mode=""></image>
					
					<view class="color fs-36">
						<text>邀请好友</text>
						<text class="ml-10">领取豪礼</text>
					</view>
					<view class="mt-100">
						<view class="fr-ac">
							<view class="">
								推广奖励
							</view>
							<view class="fr-ac ml-auto">
								<view @click="popup.showWithdrawal = true" class="color mr-5">
									提现
								</view>
								<image style="width: 24rpx;height: 24rpx;" src="/static/icon/public/right-fill.png" mode=""></image>
							</view>
						</view>
						<view class="fs-64 text-color-b mt-20">
							{{state.user_info.commission}}
						</view>
						<view class="op-50 mt-20">
							成功邀请好友，获得佣金奖励
						</view>
					</view>
					
					<view class="fr-ac mt-100 gap-40">
						<view class="public-btn-14 transition py-25 t-c flex-1">
							<view @click="openCode" class="text-color-b fs-32">
								兑换码邀请
							</view>
						</view>
						<view @click="$u.route('/pages/team/code')" class="public-btn-14 transition py-25 t-c flex-1">
							<view class="text-color-b fs-32">
								海报邀请
							</view>
						</view>
					</view>
					
				</view>
				
				
				<view class="px-100">
					<up-tabs
						@change="tabChange"
						:list="tabs.list" 
						:current="tabs.current"
						lineWidth="14"
						lineHeight="14"
						:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
						:activeStyle="{
							color: publicStyles['--color'],
							fontWeight: 'bold',
							transform: 'scale(1.2)'
						}"
						:scrollable="false"
						itemStyle="height: 60px;"
						:inactiveStyle="{
							'font-size': '32rpx',
						}"
					>
					</up-tabs>
				</view>
				
				<view class="">
					<view class="mt-40 u-border-bottom pb-30 fr-ac" style="border-color: var(--gray-line) !important;" v-for="(item,index) in state.list" :key="index">
						<image style="width: 80rpx;height: 80rpx;border-radius: 50%;" :src="item.headimg" mode=""></image>
						<view class="flex-1 mx-20">
							<view class="fr-ac">
								<view class="ellipsis-1 op-90 flex-1">
									{{item.nickname}}
								</view>
								<view class="ml-auto op-30">
									{{item.addtime}}
								</view>
							</view>
							
							<view class="mt-10 op-50">
								邀请人：{{item.tui_name}}
							</view>
						</view>
					</view>
				</view>
				<no-more :show="state.list.length == 0"></no-more>
				
				<up-popup :show="popup.showWithdrawal" @close="popup.showWithdrawal = false" mode="bottom" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="fc-ac px-50" style="position: relative;min-height:800rpx;background: linear-gradient(to bottom, #17404D 0%, #001524 100%);">
						<view class="w-100" style="position: absolute;top: 0;left: 0;height: 2px;background: linear-gradient(to right, #184250 0%, #4EB5C8 25% , #E4FBFF 50% , #4EB5C8 75% , #184250 100%);"></view>
						<view class="color pt-60 fs-36 t-c">
							提现确认
						</view>
					
						<view class="fr-ac mt-60 w-100 gap-30">
							<view class="w-20 t-r op-90">
								姓名
							</view>
							<view class="public-input-1 px-30 py-25 fr-ac-jsb flex-1" style="color: #fff;">
								<input v-model="formData.name" class="flex-1 fs-26" type="text" placeholder="请输入姓名" />
							</view>
						</view>
						<view class="fr-ac mt-40 w-100 gap-30">
							<view class="w-20 t-r op-90">
								提现金额
							</view>
							<view class="public-input-1 px-30 py-25 fr-ac-jsb flex-1" style="color: #fff;">
								<input v-model="formData.money" class="flex-1 fs-26" type="number" placeholder="请输入提现金额" />
								<view @click="formData.money = state.user_info.commission" class="color">
									全部提现
								</view>
							</view>
						</view>
						<view class="fr mt-40 w-100 gap-30">
							<view class="w-20 t-r op-90">
								收款码
							</view>
							<view v-if="!formData.imgurl" @click="chooseImage" class="fr-ac-jsb flex-1" style="color: #fff;">
								<image style="width: 160rpx;height: 160rpx;" src="/static/icon/public/add-file.png" mode="widthFix"></image>
							</view>
							<view v-else class="" style="position: relative;">
								<image style="width: 160rpx;height: 160rpx;" :src="formData.imgurl" mode=""></image>
								<image @click="deleteImage" style="width: 40rpx;height: 40rpx;position: absolute;top: 0;right: 0;" src="/static/icon/public/delete.png" mode="widthFix"></image>
							</view>
							
						</view>
						
						
						<view class="fr-ac gap-40 w-100 mt-auto">
							<view @click="popup.showWithdrawal = false;" class="public-btn-7 transition py-25 t-c mb-60 flex-1">
								<view class="op-90 fs-32">
									取消
								</view>
							</view>
							<view @click="popupWithdrawalConfirm" class="public-btn-4 transition py-25 t-c mb-60 flex-2">
								<view class="text-color-b fs-32">
									提现
								</view>
							</view>
						</view>
					</view>
				</up-popup>
				
				<up-popup :show="popup.showCode" @close="popup.showCode=false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-5 px-50 py-20 fc" style="width: 670rpx;min-height: 600rpx;position: relative;">
						<view class="fs-36">
							生成兑换码
						</view>
						<view class="mt-100 fc-ac">
							<view class="public-cover-1 t-c fs-40 px-100 py-25 w-fit color">
								{{state.cdk}}
							</view>
							<view class="mt-50 op-50">
								24小时内新用户输入此兑换码即可绑定上下级
							</view>
						</view>
						<view @click="copy(state.cdk);popup.showCode = false" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								复制兑换码
							</view>
						</view>
					</view>
				</up-popup>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import config from '@/common/config'
	import{
		copy
	} from '@/common/common'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		team,
		cdk_add,
		withdraw
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		await get_team()
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	const popup = reactive({
		showWithdrawal:false,
		showCode:false,
	})
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:2,
				name:'间接记录',
			},
			{
				id:1,
				name:'直推记录',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
		initData()
		get_team()
	}
	
	const state = reactive({
		list:[],
		page:1,
		limit:15,
		last_limit:15,
		
		user_info: {},
		jian_num: 0,
		zhi_num: 0,
		
		cdk: ''
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	
	const formData = reactive({
		imgurl:'',
		money:'',
		name:''
	})
	
	async function popupWithdrawalConfirm(){
		if(!formData.name){
			return uni.$u.toast('请输入姓名')
		}
		if(!formData.money){
			return uni.$u.toast('请输入提现金额')
		}
		if(!formData.imgurl){
			return uni.$u.toast('请选择收款码')
		}
		
		const res = await withdraw({
			...formData
		})
		popup.showWithdrawal = false
		initData()
		await get_team()
		uni.$u.toast('提现申请已提交！')
	}
	
	async function get_team(){
		const res = await team({
			type: tabs.list[tabs.current].id
		})
		state.user_info = res.user_info
		state.list = res.team.list
		state.jian_num = res.jian_num
		state.zhi_num = res.zhi_num
	}
	
	async function openCode(){
		const res = await cdk_add({})
		state.cdk = res.cdk
		popup.showCode = true
	}
	
	
	async function chooseImage(){
		uni.chooseImage({
			count: 1, //默认9
			success: async function(res) {
				const filePath = res.tempFiles[0].path;
				console.log(res,'上传res')
				formData.imgurl = await upload(filePath)
			},
			fail: function(res) {
				console.log('上传失败');
			},
		})
	}
	async function upload(filePath){
		return new Promise((resolve,reject)=>{
			uni.uploadFile({
			    url: config.baseUrl + '/api/picture', //仅为示例，非真实的接口地址
			    filePath: filePath,
			    name: 'file',
			    formData: {
			        'user': 'test'
			    },
			    success: (uploadFileRes) => {
			        let { data,status,msg } = JSON.parse(uploadFileRes.data)
			        if(status == 1){
						resolve(data.path)
			        }else{
						reject()
					}
			    },
				fail: () => {
					reject()
				}
			});
		})
	}
	
	function deleteImage(){
		formData.imgurl = ''
	}
	
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 50rpx;
		
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
</style>